<script>
import {getSysLogList} from "@/api/systemAdministration/theLogs/sysLog";
import da from "element-ui/src/locale/lang/da";

export default {
  name: "index",
  data() {
    return {
      sysLog: [],
      pageNum: 1,
      pageSize: 5,
      pages: null,
      form: {
        userName: null,
        dateRange: []
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  mounted() {
    this.getData(this.pageNum, this.pageSize, this.form.userName, this.form.dateRange);
  },
  methods: {
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.getData(this.pageNum, this.pageSize, this.form.userName, this.form.dateRange)
    },
    handleCurrentChange: function (val) {
      this.pageNum = val;
      this.getData(this.pageNum, this.pageSize, this.form.userName, this.form.dateRange)
    },
    getData(pageNum, pageSize, userName, dateRange) {
      console.log(dateRange)
      getSysLogList(pageNum, pageSize, userName, dateRange).then(res => {
        if (res !==null) {
          this.sysLog = res.data.list;
          this.pages = res.data.total;
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
        }
      })
    }
  }
}
</script>

<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="用户名：">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="发起时间：">
        <div class="block">
          <el-date-picker
            v-model="form.dateRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData(pageNum, pageSize, form.userName, form.dateRange)">查 询</el-button>
      </el-form-item>
    </el-form>
    <template style="margin:10px;">
      <el-table :data="sysLog" style="     margin: 0 auto;" >
        <el-table-column
          label="编号"
          prop="id">
        </el-table-column>
        <el-table-column
          label="用户名"
          prop="users.userName"/>
        <el-table-column
          label="角色"
          sortable
          prop="roles.roleName"/>
        <el-table-column
          label="事件"
          sortable
          prop="desc"/>
        <el-table-column
          label="调用的接口"
          sortable
          prop="uri"
          show-overflow-tooltip/>
        <el-table-column
          label="操作时间"
          sortable
          prop="createDate"/>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 25]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
.el-form{
  margin: 20px;
}
.el-table,.demo-form-inline {
  margin: 30px;
}
</style>
